<template>
  <!-- 整体布局：侧边栏 + 主内容 -->
  <el-container style="height: 100vh;">
    <!-- 右侧主体区域 -->
    <el-container>
      <!-- 顶部标题栏：左右布局，左侧标题，右侧按钮 -->
      <el-header
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          border-bottom: 1px solid #ebeef5;
        "
      >
        <h2>会议管理工作台</h2>
        <div>
          <el-button type="primary" plain @click="openMeetingCreateDialog">新增会议</el-button>
          <el-button type="primary">资源统计</el-button>
        </div>
      </el-header>

      <!-- 主内容区 -->
      <el-main>
         <!-- 快捷操作区：强化会议创建入口关联 -->
        <div class="quick-ops">
          <el-button type="primary" icon="Search" circle @click="openMeetingSearchDialog" />
          <span class="ops-text">会议查询</span>
          <el-button type="primary" icon="Edit" circle @click="openMeetingNotificationDialog" />
          <span class="ops-text">会议通知</span>
          <el-button type="primary" icon="StatsChart" circle />
          <span class="ops-text">会议统计</span>
        </div>

        <!-- 会议创建组件：添加显隐控制和回调 -->
        <MeetingCreate 
          ref="meetingCreateRef" 
          class="meeting-create-component"
          :visible="isCreateDialogOpen"
          @close="isCreateDialogOpen = false"
          @success="handleMeetingCreateSuccess"
        />
        <!-- 引入查询会议组件-->
        <MeetingSearch ref="meetingSearchRef" />
        <!-- 引入新增的会议通知组件 -->
        <MeetingNotification ref="meetingNotificationRef" />
        <!-- 引入会议统计组件 -->
        <MeetingStats ref="meetingStatsRef" />

        <!-- 数据概览卡片 -->
        <div class="stats-section">
          <h3>本月会议量</h3>
          <div class="stats-card">
            <div class="stats-item">
              <p>2月会议总量</p>
              <span>154</span>
              <small>可预约会议数量</small>
            </div>

            <div class="stats-item">
              <p>预约中/已完成</p>
              <el-tag type="info">正常</el-tag>
            </div>

            <div class="stats-item">
              <p>未完成会议</p>
              <el-tag type="success">跟进</el-tag>
            </div>

            <div class="stats-item">
              <p>审批中会议</p>
              <el-tag type="warning">处理中</el-tag>
            </div>

            <div class="stats-item">
              <p>已驳回会议</p>
              <el-tag type="danger">预警</el-tag>
            </div>
          </div>

          <!-- 表格：展示月度会议列表 -->
          <h3>本月会议数量</h3>
          <el-table :data="tableData" border style="width: 100%;">
            <el-table-column prop="cycle" label="周期" />
            <el-table-column prop="number" label="数量" />
            <el-table-column prop="track" label="会议跟踪" />
            <!-- 状态列：根据 statusType 渲染不同颜色标签 -->
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.statusType">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <!-- 操作列：单个确认按钮 -->
            <el-table-column prop="operation" label="操作">
              <template #default>
                <el-button type="primary" circle icon="Check" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
// 引入创建会议组件
import MeetingCreate from '@/views/competence/meetingCreate/MeetingCreate.vue'; 

// 引入 ElementPlus 图标
// import { Menu, Document, Notification, OfficeBuilding, Gift, Plus, Search, Edit, StatsChart, Check } from '@element-plus/icons-vue'

import { ref } from 'vue'

// 创建会议创建组件引用
const meetingCreateRef = ref(null);
// 打开会议创建弹窗的方法
const openMeetingCreateDialog = () => {
  // 调用子组件的方法显示弹窗
  meetingCreateRef.value?.openDialog();
};
/**
 * 表格数据（示例）
 * cycle：周期描述
 * number：数量
 * track：跟踪信息
 * status：状态文本
 * statusType：el-tag 的类型，决定颜色
 */
const tableData = ref([
  {
    cycle: '2025-02-01 周期',
    number: '042',
    track: '220',
    status: '进行中',
    statusType: 'info'
  },
  {
    cycle: '2025-02-02 周期',
    number: '043',
    track: '190',
    status: '已完成',
    statusType: 'success'
  },
  {
    cycle: '2025-02-03 周期',
    number: '045',
    track: '200',
    status: '待审批',
    statusType: 'warning'
  },
  {
    cycle: '2025-02-04 周期',
    number: '048',
    track: '290',
    status: '已驳回',
    statusType: 'danger'
  }
])

/**
 * 菜单选中事件
 * @param {string} index 选中的菜单 index
 * 可在此处扩展：路由跳转、动态组件加载等
 */
const handleMenuSelect = (index) => {
  console.log('选中菜单：', index)
}
</script>

<style scoped>
/* 侧边栏文字颜色 */
.el-aside {
  color: #333;
}

/* 移除菜单自带右侧边框 */
.el-menu-vertical-demo {
  border-right: none;
}

/* 顶部标题栏字体加粗 */
.el-header {
  color: #333;
  font-weight: bold;
}

/* 快捷操作区：横向排列，自动换行 */
.quick-ops {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ops-text {
  line-height: 24px;
}

/* 数据概览卡片整体容器 */
.stats-section {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 卡片内多项指标横向排列，自动换行 */
.stats-card {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* 单个指标卡片 */
.stats-item {
  flex: 1;
  min-width: 180px;
  background: #f8f9fc;
  padding: 15px;
  border-radius: 4px;
}
</style>
